<template>
  <div class="foot">
    <ul>
      <li><img src="@/assets/images/foot/weixin.svg" alt="" srcset="" /></li>
      <li><img src="@/assets/images/foot/qq.svg" alt="" srcset="" /></li>
      <li><img src="@/assets/images/foot/weibo.svg" alt="" srcset="" /></li>
      <li><img src="@/assets/images/foot/douyin.svg" alt="" srcset="" /></li>
      <li><img src="@/assets/images/foot/kuaishou.svg" alt="" srcset="" /></li>
    </ul>
    <div class="text">{{ text }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const text = ref("备案号：黔ICP备2022004638号-1   Copyright © WushunBlogDiary");
</script>

<style lang="scss" scoped>
.foot {
  width: 100%;
  height: 100px;
  margin: 40px 0 10px;
  .text {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin: 20px 10px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    margin-top: 15px;
    li {
      img {
        width: 40%;
        height: 40%;
      }
    }
  }
}
</style>